<template>
	<view class="sea-wp">
		<view class="nav_bar">
			<view class="search-title">
				<view class="back-btn" @click="$navTo('/pages/index/index')">
					<uni-icons type="arrowleft" size="30" color="rgba(0,0,0,.5)"></uni-icons>
				</view>

				<icon class="icon" type="search" size="20" color="#ccc" @click="search" />
				<input type="text" @confirm="search" v-model="keyword" placeholder="搜索产品或门店" />
			</view>
			<!-- <view class="selet_bar">
				<text class="active">门店</text>
				<text class="active">团购</text>
			</view> -->
		</view>

		<view class="JcurSkill_lists">
			<view class="list" v-for="item in list" :key="item.uid"
				@click="$navTo('../shoplist/shopgoods?id='+item.uid)">
				<view class="body">
					<image :src="item.logo" mode=""></image>
					<view class="JcurSkill_list_cont">
						<view class="title">
							<text class="icon" v-if="item.ispig==1">清真</text>
							<text>{{item.supname}}</text>
						</view>
						<view class="label">
							<text v-if="item.shorttitle">{{item.shorttitle}}</text>
							<text v-if="item.shortaddress">{{item.shortaddress}}</text>
						</view>
						<view class="label2">
							<text>人均{{item.avgsale}}元</text>
							<text>{{item.browerNum}}人进店</text>
							<text>已售{{item.orderNum}}单</text>
						</view>
						<view class="price">
							<view class="grade">
								<text class="label">VIP</text>
								<text>{{item.vipdiscount}}折</text>
							</view>
							<view class="grade grade1">
								<text class="label">会员</text>
								<text>{{item.discount}}折</text>
							</view>
							<view class="addre" @click.stop="openMap(item)">
								<text class="iconfont icon-dizhi"></text>
								<text>{{item.distance}}</text>
							</view>
						</view>
					</view>
				</view>
				<scroll-view class="shop_list" v-if="item.goods.length>0" scroll-x>
					<view class="item" v-for="it in item.goods" :key="it.id"
						@click.stop="$navTo('/pages/product/groupbuy?id='+it.id)">
						<image :src="it.thumb" mode=""></image>
						<view class="title">{{it.title}}</view>
						<view>{{it.saleprice}}元</view>
					</view>
				</scroll-view>
			</view>
			<view class="empty">
				<image v-if="isloading" src="../../static/business/loading.gif" mode=""></image>
				<view v-if="!ismore">到底了~</view>
			</view>
		</view>


	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		computed: {
			...mapState(['Location'])
		},
		data() {
			return {
				keyword: '',
				page: 0,
				list: [],

				isloading: false,
				ismore: true,
			}
		},
		onReachBottom() {
			this.getList();
		},
		methods: {
			search() {
				this.page = 0;
				this.list = [];
				this.getList();
			},
			getList() {
				this.page++;
				let obj = {
					...this.Location,
					...{
						keyword: this.keyword,
						page: this.page
					}
				}
				this.isloading = true;
				this.ismore = true;
				this.$axios('o2o/search', 'POST', 'shop', obj).then(res => {
					this.isloading = false;
					if (res.data.code == 200) {
						this.list = [...this.list, ...res.data.data];
						this.ismore = res.data.data.length > 0;
					}
				})
			},
			openMap(v) {
				let that = this;
				uni.openLocation({
					latitude: parseFloat(v.y),
					longitude: parseFloat(v.x),
					scale: 10,
					name: v.shorttitle,
					address: v.supaddress,
				});
			},
		}
	}
</script>

<style lang="scss">
	@import "/store/icon.css";

	page {
		background: #f2f2f2;
	}

	.sea-wp {
		position: relative;

		.nav_bar {
			background: #fff;
			padding-top: var(--status-bar-height);
			position: fixed;
			top: 0;
			width: 100%;
			z-index: 100;
		}

		.search-title {
			display: flex;
			align-items: center;
			height: 100upx;
			padding: 0 20upx;
			position: relative;

			.back-btn {
				position: relative;
				left: -10upx;
			}

			input {
				display: block;
				flex: 1;
				line-height: 60upx;
				padding: 0 40upx 0 80upx;
				height: 60upx;
				font-size: 26upx;
				border-radius: 50upx;
				color: rgb(96, 98, 102);
				margin: 0 60upx 0 10upx;
				background-color: rgba(231, 231, 231, 0.7);
			}

			.icon {
				position: absolute;
				top: 30upx;
				left: 110upx;
			}
		}

		.selet_bar {
			display: flex;
			align-items: center;

			text {
				font-size: 32upx;
				line-height: 80upx;
				padding-left: 30upx;
			}

			.active {
				color: $bg-color;
				font-weight: bold;
			}
		}
	}

	.JcurSkill_lists {
		color: #303133;
		// padding-top: calc(var(--status-bar-height) + 200upx);
		padding-top: calc(var(--status-bar-height) + 120upx);
	}

	.list {
		background: #fff;
		border-radius: 20upx;
		box-shadow: 0 0 10px 3px rgba(0, 0, 0, .2);
		margin: 0 20upx 20upx;

		.body {
			display: flex;
			align-items: center;
			padding: 20upx;

			image {
				border-radius: 15upx;
				height: 155upx;
				width: 155upx;
			}
		}
	}

	.JcurSkill_list_cont {
		width: calc(100% - 175upx);
		margin-left: 20upx;

		.title {
			color: #000;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			line-height: 45upx;

			.icon {
				border: 1px #02883d solid;
				border-radius: 2upx;
				color: #02883d;
				font-size: 22upx;
				line-height: 45upx;
				padding: 0 6upx;
				margin-right: 5upx;
			}
		}

		.label {
			font-size: 24upx;

			text {
				display: inline-block;
				padding: 0 20upx;
				position: relative;
			}

			text:after {
				position: absolute;
				content: '';
				border-right: 1px #666 solid;
				top: 50%;
				right: 0;
				height: 20upx;
				transform: translateY(-50%);
			}

			text:nth-of-type(1) {
				padding-left: 0;
			}

			text:last-child:after {
				border: none;
			}
		}

		.label2 {
			padding-top: 10upx;
			color: $bg-color;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 24upx;
		}
	}

	.price,
	.grade,
	.addre {
		display: flex;
		align-items: center;

		.grade {
			color: #8405dc;
			font-size: 24upx;

			.label {
				background: #000;
				border-radius: 10upx;
				color: #f3dd91;
				padding: 6upx 10upx;
			}

			text {
				padding: 0 20upx;
			}
		}

		.grade1 {
			.label {
				background: #f3dd91;
				color: #927419;
			}
		}

		.addre {
			color: #3e9ff4;
			flex: 1;
			justify-content: flex-end;
		}
	}

	.shop_list {
		width: 100%;
		padding: 0 0 20upx 20upx;
		white-space: nowrap;

		view {
			display: inline-block;
			padding-right: 10upx;

			image {
				border-radius: 10upx;
				height: 140upx;
				width: 140upx;
			}

			view {
				color: $bg-color;
				display: block;
				font-size: 22upx;
				transform: scaleY(1.4);
			}

			.title {
				color: #000;
				overflow: hidden;
				font-size: 23upx;
				text-overflow: ellipsis;
				transform: scaleY(1);
				white-space: nowrap;
				width: 145upx;
			}
		}

	}

	.shop_list {
		width: 100%;
		padding: 0 0 20upx 20upx;
		white-space: nowrap;

		view {
			display: inline-block;
			padding-right: 10upx;

			image {
				border-radius: 10upx;
				height: 140upx;
				width: 140upx;
			}

			view {
				color: $bg-color;
				display: block;
				font-size: 22upx;
				transform: scaleY(1.4);
			}

			.title {
				color: #000;
				overflow: hidden;
				font-size: 23upx;
				text-overflow: ellipsis;
				transform: scaleY(1);
				white-space: nowrap;
				width: 145upx;
			}
		}

	}

	.empty {
		color: #3e9ff4;
		padding-top: 30upx;
		text-align: center;

		image {
			height: 50upx;
			width: 50upx;
		}
	}
</style>